<%@ page pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>sidebar</title>
</head>
<body>
<script src="assets/js/vue.js"></script>
<script src="assets/js/router.js"></script>
<div id="sidebar">
    <div class="sidebar-title-box">
        <span class="logo" style="width: 2.4vw;"><img src="assets/icons/icon1.svg"></span>
        <span>预约挂号系统</span>
    </div>
    <div class="menu-list">
        <div class="menu-item" v-for="(item,index) in this.routes" :key="item.name">
            <div class="menu" @click="menuClick(item.url,index)" :class="{'selected': selected(item.url)}">
                <span class="icon-box">
                    <img :src="'assets/icons/' + item.icon + (selected(item.url)?'_s.svg':'.svg')">
                </span>
                <span>{{item.name}}</span>
                <span class="float-box" v-if="item.sub.length>0">
                    <img :src="selected(item.url)?'assets/icons/fold.svg':'assets/icons/unfold.svg'">
                </span>
            </div>
            <div class="sub-menu menu" v-for="(sub,index) in item.sub" v-show="item.sub.length>0 && selected(item.url)" @click="submenuClick(index)" :class="{'selected': subSelected(index)}">
                <span class="icon-box">
                    <img :src="'assets/icons/' + sub.icon +(subSelected(index)?'_s.svg':'.svg')">
                </span>
                <span>{{sub.name}}</span>

            </div>
        </div>
    </div>
</div>

<script>
    // import { routes } from 'assets/js/router.js'

    const sidebar=new Vue({
        el:'#sidebar',
        data: {
            route: [
                [
                    {
                        name: '首页',
                        icon: 'main',
                        url: 'main',
                        sub: []
                    },
                    {
                        name: '预约挂号',
                        url: 'appointment',
                        icon: 'appointment',
                        sub: [
                            {
                                name: '在线预约',
                                icon: 'online_appointm'
                            },
                            {
                                name: '预约管理',
                                icon: 'appointm_mana'
                            }
                        ]
                    },
                    {
                        name: '个人中心',
                        url: 'profile',
                        icon: 'profile',
                        sub: []
                    }
                ],
                [
                    {
                        name: '首页',
                        icon: 'main',
                        url: 'main',
                        sub: []
                    },
                    {
                        name: '预约管理',
                        url: 'appointmentMana',
                        icon: 'appointm_mana',
                        sub: [
                            {
                                name: '挂号处理',
                                icon: 'online_appointm'
                            },
                            {
                                name: '已完成挂号',
                                icon: 'appointm_mana'
                            }
                        ]
                    },
                    {
                        name: '门诊信息',
                        url: 'examination',
                        icon: 'examination',
                        sub: []
                    },
                    {
                        name: '个人中心',
                        url: 'profile',
                        icon: 'profile',
                        sub: []
                    }
                ],
                [
                    {
                        name: '首页',
                        icon: 'main',
                        url: 'main',
                        sub: []
                    },
                    {
                        name: '系统管理',
                        url: 'system',
                        icon: 'appointm_mana',
                        sub: [
                            {
                                name: '公告管理',
                                icon: 'notice'
                            },
                            {
                                name: '留言板管理',
                                icon: 'comment'
                            },
                            {
                                name: '挂号类型管理',
                                icon: 'type'
                            },
                            {
                                name: '挂号科室管理',
                                icon: 'depart'
                            }
                        ]
                    },
                    {
                        name: '医生管理',
                        url: 'doctors',
                        icon: 'doctor',
                        sub: []
                    },
                    {
                        name: '用户管理',
                        url: 'users',
                        icon: 'profile',
                        sub: []
                    },
                    {
                        name: '预约管理',
                        url: 'appointmentMana',
                        icon: 'doctor',
                        sub: []
                    },
                    {
                        name: '门诊信息',
                        url: 'examination',
                        icon: 'examination',
                        sub: []
                    },
                    {
                        name: '个人中心',
                        url: 'profile',
                        icon: 'profile',
                        sub: []
                    }
                ],
            ],
            routes: [
                {
                    name: '首页',
                    icon: 'main',
                    url: 'main',
                    sub: []
                }
            ]
        },
        methods: {
            menuClick(name,index) {
                // var path = window.location.search;
                // var taba = document.querySelector('#taba');
                // var tabb = document.querySelector('#tabb');
                // console.log(path,window.location.pathname);
                let path = window.location.pathname;
                if(path.indexOf(name) != -1) {
                    return;
                }
                if(this.routes[index].sub.length > 0) {
                    window.location = name + ".jsp?tab=0";
                }
                else {
                    window.location = name + ".jsp";
                }

            },
            submenuClick(index) {
                // var path = window.location.search;
                // var taba = document.querySelector('#taba');
                // var tabb = document.querySelector('#tabb');
                // console.log(path,window.location.pathname);
                let path = window.location.pathname;
                let query = window.location.search;
                console.log(query.split('tab='));
                if(query.split('tab=')[1] == index) {
                    return;
                }
                window.location = path + "?tab=" + index;
            },
            selected(name) {
                if(window.location.pathname.indexOf(name) == -1) {
                    console.log(false)
                    return false;
                }
                console.log(true)
                return true;
            },
            subSelected(index) {
                let query = window.location.search;
                if(query.split('tab=')[1] != index) {
                    // console.log(false)
                    return false;
                }
                // console.log(true)
                return true;
            },
            loginCheck() {
                let loginData = localStorage.getItem('user');
                console.log(loginData)
                if (loginData == null) {
                    console.log("未登录")
                    window.location = "login.html"
                }
            }
        },
        computed: {

        },
        created() {
            this.loginCheck();
            let userD = JSON.parse(localStorage.getItem('user'))
            if(userD!=null) {
                console.log(this.route)
                if(userD.role=='doctor') {
                    this.routes = this.route[1]

                }
                else if(userD.role=='admin') {
                    this.routes =  this.route[2]
                }
                else {
                    this.routes =  this.route[0]
                }
                console.log(this.routes)
                // this.routes = routes[this.role[userD.role]]
            }

        }
    })
</script>
<style>
    @import "assets/css/base.css";
    #sidebar {
        width: 15vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: rgb(48, 65, 86);
        box-shadow: 2px 0 6px rgba(0,21,41,.35);
    }
    #sidebar .sidebar-title-box {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1vw;
        color: #fff;
        font-weight: 600;
    }
    #sidebar .sidebar-title-box .logo {
        margin: 0.5vw 0.5vw 0.5vw 0;
        width: 2.3vw;

    }
    #sidebar .sidebar-title-box .logo img {
        width: 100%;
    }
    #sidebar .menu-list {
        width: 100%;
        display: flex;
        flex-direction: column;

    }
    #sidebar .menu-list .menu-item {
        color: #bfcbd9;
        font-size: 1vw;

    }
    #sidebar .menu-list .menu-item .menu {
        display: flex;
        padding: 1.5vw 2vw;
        justify-content: start;
        align-items: center;
        position: relative;
    }
    #sidebar .menu-list .menu-item:hover {
        background-color: #2b3c51;
    }
    #sidebar .menu-list .menu-item .selected {
        color: #1890ff;
    }
    #sidebar .menu-list .menu-item .sub-menu {
        background-color: #1f2d3d;

    }
    #sidebar .menu-list .menu-item .sub-menu:hover {
        background-color: #181f30;
    }
    #sidebar .menu-list .menu-item .icon-box {
        width: 1.2vw;
        height: 1.2vw;
        margin-right: 2vw;
    }
    #sidebar .menu-list .menu-item .icon-box img {
        width: 100%;
    }
    #sidebar .menu-list .menu-item .menu .float-box {
        position: absolute;
        right: 2vw;
        width: 0.8vw;
        height: 0.8vw;
    }
    #sidebar .menu-list .menu-item .menu .float-box img {
        width: 100%;
    }
</style>
</body>
</html>